<template>
  <!-- 有合同 -->
  <div class="contract-list-show" v-if="list?.length > 0">
    <!-- 有权限 -->
    <div class="contract-list" v-if="hasPermission">
      <div class="contract-item link" v-for="(item, index) in list" :key="index" @click="onContractClick(item)">{{ item.contractNo }}</div>
    </div>
    <!-- 无权限 -->
    <div class="contract-list" v-else>
      <div class="contract-item" v-for="(item, index) in list" :key="index">{{ item.contractNo }}</div>
    </div>
  </div>
  <!-- 无合同 -->
  <div v-else>-</div>

  <!-- 预览pdf -->
  <pdf-viewer
    :url="pdfViewInfo.url"
    :title="pdfViewInfo.title"
    v-model:visible="pdfViewInfo.show"
    @close="Object.assign(pdfViewInfo, { ...PDFDefaultAttr })"
  />
  <!-- 图片预览组件 -->
  <a-image-preview-group v-model:visible="previewVisible" v-model:current="previewCurrent" :maskClosable="false" :srcList="[imgSrc]" />
</template>
<script setup>
  import { ref, computed, reactive } from 'vue'
  import request from '@/api/axios.config'
  import { getFileInfo } from '@/api/common/index.js'
  import usePermissionStore from '@/store/modules/permission'
  // pdf预览
  import { PDFDefaultAttr } from '@/components/pdf-viewer/const'
  const pdfViewInfo = reactive({ ...PDFDefaultAttr })
  const { resourcePermission } = usePermissionStore()
  // 图片预览
  const previewVisible = ref(false)
  const previewCurrent = ref(0)
  const imgSrc = ref('')

  const props = defineProps({
    list: {
      type: Array,
      default: () => [
        // 普通版电子合同
        // { id: 11554, contractNo: 'PT10460202411180007', contractTypeName: '租车合同' },
        // { id: 11548, contractNo: 'PT10460202411180004', contractTypeName: '租车合同' },
        // { id: 11546, contractNo: 'PT10460202411180003', contractTypeName: '租车合同' },
        // 收费版电子合同
        // { id: 11526, contractNo: '3296070068131074677', contractTypeName: '租车合同' },
        // 线下合同
        // {
        //   id: 8454,
        //   contractNo: 'PT10460202411180002',
        //   contractAttribute: 2,
        //   contractTypeName: '租车合同',
        //   contractFileId: '3407045360093261056',
        // },
      ],
    },
    orderType: {
      type: String,
      default: 'shortOrder',
    },
  })

  // 权限名称
  const hasPermission = computed(() => {
    // 权限同：订单-订单详情-合同预览、长租-订单详情-合同预览
    const code = props.orderType == 'shortOrder' ? 'svms:order:short-order.contractPreview' : 'svms:order:long-order.contractPreview'
    return resourcePermission.includes(code)
  })

  // 合同预览
  const onContractClick = (item) => {
    // 长租线下合同，读取附件
    if (item.contractAttribute == 2) {
      const fileId = item.contractFileId
      getFileInfo({ id: fileId }).then((res) => {
        const result = res.result
        // 文件链接
        const url = `${import.meta.env.VITE_BASE_PATH}/uploadFile/image/${result.fileIdStr}`
        // 文件名称
        const title = result.originalFileName
        // 调用弹窗预览
        if (url) {
          let fileName = title.split('.').pop().toLowerCase()
          // pdf预览
          // if (fileName == 'pdf') {
          //   Object.assign(pdfViewInfo, {
          //     url: url,
          //     title: title,
          //     show: true,
          //   })
          //   return
          // }
          // 图片预览
          if (['jpg', 'png'].includes(fileName)) {
            previewVisible.value = true
            previewCurrent.value = 0
            imgSrc.value = url
            return
          }
          window.open(url)
        }
      })
    } else {
      request
        .post(
          '/svmsContract/downloadContractFile',
          {
            id: item.id,
          },
          {
            responseType: 'blob',
          }
        )
        .then((res) => {
          const binaryData = [res.data]
          const url = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf' }))
          const title = `${item.contractTypeName}${item.contractNo}`
          window.open(url)
          // 调用弹窗预览
          // Object.assign(pdfViewInfo, {
          //   url: url,
          //   title: title,
          //   show: true,
          // })
        })
    }
  }
</script>
<style lang="less" scoped>
  .link {
    color: rgb(var(--primary-6));
    cursor: pointer;
    text-decoration: underline;
  }
</style>
